<template>

	<div>
		<div>{{msg}}</div>
		<button @click="btnClick()"> 按钮  </button>
		<button v-on:click="btnClick()"> 按钮  </button>
		
		
		<div>
			
			<a href="http://www.baidu.com" @click="clickHref">默认链接--有默认行为</a>
			<br>
			
			<a href="http://www.baidu.com" @click.prevent="clickHref">链接--阻止了默认行为</a>
		
		</div>
		
		
		<div>
			
			<button @click.once="clickOnce()">只执行一次</button>
			
		</div>
		
		
		<div style="width: 200px;height: 200px;background-color: antiquewhite;cursor: pointer;" @click="clickOuter">
			
			<div style="width: 100px;height: 100px;background-color:green;cursor: pointer;" @click.stop="clickInner">
				
				
				
			</div>
			
		</div>
		
		
		
		
		<div style="width:300px;height:300px;border:solid 1px red" @mousemove="listenerMouse">
			
			
			
		</div>
		
	</div>
	
	
</template>

<script>
	
	
	export default{
		name:'EventBind',
		data(){
			return {
				msg:'Hello Event'	,
				
			}
		},
		methods:{
			// btnClick:function(){
			// 	console.log("改变msg的值")
			// 	console.log(this)
			// 	this.msg = "Click Btn";
			// },
			btnClick(){
				console.log("改变msg的值")
				console.log(this)
				this.msg = "Click Btn";
			},
			listenerMouse(event){
				//原生的dom事件 event
				// let x = event.x;
				// let y = event.y;
				
				let {x,y} = event;
				
				
				console.log('鼠标移动x='+x+",y="+y);
			},
			clickHref(event){
				//event.preventDefault();//阻止事件的默认行为
				window.alert('点击ref')
			},
			clickOnce(){
				alert('只执行一次的按钮事件')
			},
			clickOuter(){
				console.log("大的div 被点击")
			},
			clickInner(event){
				//event.stopPropagation();
				console.log("内部的div 被点击")
			}
		}
	}
	
	
</script>

<style scoped>
	
	
	
	
</style>